<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="ring"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 定义数据类型
interface ChartDataItem {
  name: string;
  value: number;
}

interface SeriesItem {
  data: ChartDataItem[];
}

interface ChartData {
  series: SeriesItem[];
}

interface ExtraRing {
  ringWidth: number;
  activeOpacity: number;
  activeRadius: number;
  offsetAngle: number;
  labelWidth: number;
  border: boolean;
  borderWidth: number;
  borderColor: string;
  centerColor: string;
}

interface Extra {
  ring: ExtraRing;
}

interface Legend {
  show: boolean;
  position: string;
  lineHeight: number;
}

interface Title {
  name: string;
  fontSize: number;
  color: string;
}

interface Subtitle {
  name: string;
  fontSize: number;
  color: string;
}

interface Opts {
  rotate: boolean;
  rotateLock: boolean;
  color: string[];
  padding: number[];
  dataLabel: boolean;
  enableScroll: boolean;
  legend: Legend;
  title: Title;
  subtitle: Subtitle;
  extra: Extra;
  

}

// 初始化数据
const chartData = ref<ChartData>({} as ChartData);

// 您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
const opts = ref<Opts>({
  rotate: false,
  rotateLock: true,
  color: ["#1890FF","#FFFFFF","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  // 图表内边距 [上, 右, 下, 左]
  padding: [10,0,0,0],
  dataLabel: false,
  enableScroll: false,
  legend: {
    show: false,// 是否显示图例
    position: "bottom",// 图例位置：right/left/top/bottom
    lineHeight: 25// 图例行高
  },
  title: {
    name: "收益率",// 标题名称
    fontSize: 15,// 标题字体大小
    color: "#666666"// 标题字体颜色
  },
  subtitle: {
    name: "1%",// 副标题名称
    fontSize: 25,// 副标题字体大小
    color: "#7cb5ec"// 副标题字体颜色
  },
  extra: {
    ring: {
      ringWidth: 20,// 环的宽度
      activeOpacity: 0.5,// 激活状态透明度
      activeRadius: 1,// 激活状态半径
      offsetAngle: -90,// 偏移角度
      labelWidth: 15,// 标签宽度
      border: false,// 是否显示边框
      borderWidth: 3,// 边框宽度
      borderColor: "#FFFFFF",// 边框颜色
      centerColor: "#131D3E"// 中心颜色
    }
  }
});

/**
 * 模拟从服务器获取数据的函数
 * @function getServerData
 * @description 模拟异步请求服务器数据的过程，并将数据赋值给 chartData
 * @returns {void} 无返回值
 * @warning 实际开发中需替换为真实的API请求
 */
const getServerData = () => {
  // 模拟从服务器获取数据时的延时（500毫秒）
  setTimeout(() => {
    // 模拟服务器返回数据
    // 注意：如果实际数据格式和标准格式不同，需按此格式拼接
    const res: ChartData = {
      series: [
        {
          data: [
            {"name":"五班","value":1},  // 数据项：名称和值
            {"name":"五班","value":99}, 
          ]
        }
      ]
    };
    // 深拷贝数据并赋值给 chartData
    // 使用 JSON.parse(JSON.stringify(res)) 确保数据完全隔离，避免引用问题
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};

// 组件挂载后获取数据
onMounted(() => {
  getServerData();
});
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 50%;
    height: 150px;
  
  }
</style>